<template>
  <div>
    <div class="card-box">
      <el-card ref="card1" class="elcard" style="flex:.6;align-self:normal;margin-right:10px;">
        <div slot="header" class="hd clearfix">
          <span class="tit">全国投资分布图</span>
        </div>
        <maps style="width:100%;"></maps>
      </el-card>
      <!-- <el-col :span="16">
        <maps style="width:100%;"></maps>
      </el-col> -->
      <!-- <el-col :span="8"> -->
      <el-card class="elcard" style="flex:.4;align-self:normal;margin-left:10px;">
        <div slot="header" class="hd clearfix">
          <span class="tit">科技成果概况</span>
        </div>
        <div class="box">
          <div class="elcard" style="flex:.4;margin-right:10px;">
            <div>
              <ul class="achievements">
                <li>
                  <p class="info2 clearfix">
                    <span><i>专利拥有量：</i>{{patentCount['patentNum']}}件</span>
                  </p>
                  <p class="info3 clearfix">
                    <span>自主申请：<i>{{patentCount['applyNum']}}件</i></span>
                    <span>购买专利：<i>{{patentCount['buyNum']}}件</i></span>
                    <span>失效专利：<i>{{patentCount['invalidNum']}}件</i></span>
                    <span>被许可专利：<i>{{patentCount['licenseNum']}}件</i></span>
                    <span>转出：<i>{{patentCount['sellNum']}}件</i></span>
                  </p>
                </li>
                <li>
                  <p class="info2 clearfix">
                    <span><i>论文拥有量：{{patentCount2['paper']&&patentCount2['paper']['all']}}</i>件</span>
                  </p>
                  <p class="info3 clearfix">
                    <span>期刊论文：{{patentCount2['paper']['期刊']&&patentCount2['paper']['期刊'].doc_count||0}}<i>件</i></span>
                    <!-- <span>学位论文：{{patentCount2['paper']['学位']&&patentCount2['paper']['学位'].doc_count||0}}<i>件</i></span>
                    <span>其他：{{patentCount2['paper']['其它']&&patentCount2['paper']['其它'].doc_count||0}}<i>件</i></span> -->
                  </p>
                </li>
                <li>
                  <p class="info2 clearfix">
                    <span><i>标准拥有量：{{patentCount2['biaozhun']&&patentCount2['biaozhun']['all']}}</i>件</span>
                  </p>
                  <p class="info3 clearfix">
                    <span>现行：{{patentCount2['biaozhun']['现行']&&patentCount2['biaozhun']['现行'].doc_count||0}}<i>件</i></span>
                    <span>即将实施：{{patentCount2['biaozhun']['即将实施']&&patentCount2['biaozhun']['即将实施'].doc_count||0}}<i>件</i></span>
                    <span>废止：{{patentCount2['biaozhun']['废止']&&patentCount2['biaozhun']['废止'].doc_count||0}}<i>件</i></span>
                  </p>
                </li>
                <li>
                  <p class="info2 clearfix">
                    <span><i>成果拥有量：{{patentCount2['chengguo']&&patentCount2['chengguo']['all']}}</i>件</span>
                  </p>
                  <p class="info3 clearfix">
                    <span>成熟应用阶段：{{patentCount2['chengguo']['成熟应用阶段']&&patentCount2['chengguo']['成熟应用阶段'].doc_count||0}}<i>件</i></span>
                    <span>初期阶段：{{patentCount2['chengguo']['初期阶段']&&patentCount2['chengguo']['初期阶段'].doc_count||0}}<i>件</i></span>
                    <span>中期阶段：{{patentCount2['chengguo']['中期阶段']&&patentCount2['chengguo']['中期阶段'].doc_count||0}}<i>件</i></span>
                  </p>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </el-card>
    </div>
    <div class="card-box">
      <el-card ref="card1" class="elcard" style="flex:1;align-self:normal;">
        <div slot="header" class="hd clearfix">
          <span class="tit">企业主要技术方向</span>
        </div>
        <div class="box">
          <pie />
        </div>
      </el-card>
    </div>
    <div class="card-box">
      <el-card ref="card1" class="elcard" style="flex:1;align-self:normal;">
        <div slot="header" class="hd clearfix">
          <span class="tit">企业技术综合评价</span>
        </div>
        <div class="box">
          <lines />
        </div>
      </el-card>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
import maps from "./child/map";
import pie from "./child/pie";
import lines from "./child/line";
export default {
  components: { maps, pie, lines },
  data() {
    return {
      companyName: this.$route.query.name,
      patentHeaderStyle: function() {
        return "font-weight: 600;color:#4e4e56;";
      },
      patentCellStyle: function() {
        return "color: #606266";
      },
      patentListItems: [],
      spanArr: [],
      pop: 0,
      // 科技成果概况
      patentCount: {},
      patentCount2: {
        biaozhun: {},
        paper: {},
        chengguo: {}
      },
    };
  },
  methods: {
    // 科技成果概况
    getCompanyPatentInfo() {
      return this.$get(this.$Url.science.companyPatentInfo, {
        companyName: this.companyName,
        dataType: 'patentCount'
      })
      // this.$get(this.$Url.science.companyPatentInfo, {
      //   companyName: this.companyName,
      //   dataType: "patentCount"
      // })
      //   .then(res => {
      //     let data = res.data;
      //     if (data) {
      //       let patCountData = data.patentCount;
      //       this.renderEnterprisePatentOverview(patCountData);
      //     }
      //   })
      //   .catch(err => {
      //     console.log(err);
      //   });
    },
    // 转出
    getSell() {
      return this.$get(this.$Url.patent.patentLegal, {
        companyName: this.companyName
      })
    },
    // 科技成果概况其它维度
    getDocument() {
      this.$get(this.$Url.EI.document, {
        companyName: this.companyName
      }).then(res => {
        let data = res.data
        // 标准
        let biaozhunNum = 0
        if (data['biaozhun']) {
          data['biaozhun'].forEach(v => {
            biaozhunNum += v.doc_count
          })
        }
        // 论文
        let paperNum = 0
        if (data['paper']) {
          data['paper'].forEach(v => {
            paperNum += v.doc_count
          })
        }
        // 成果
        let chengguoNum = 0
        if (data['chengguo']) {
          data['chengguo'].forEach(v => {
            chengguoNum += v.doc_count
          })
        }
        let newData = {
          biaozhun: {
            'all': biaozhunNum,
            '现行': data['biaozhun'].find(v => v.key === '现行') || {},
            '即将实施': data['biaozhun'].find(v => v.key === '即将实施') || {},
            '废止': data['biaozhun'].find(v => v.key === '废止') || {},
          },
          paper: {
            'all': paperNum,
            '期刊': data['paper'].find(v => v.key === '期刊') || {}
          },
          chengguo: {
            'all': chengguoNum,
            '成熟应用阶段': data['chengguo'].find(v => v.key === '成熟应用阶段') || {},
            '中期阶段': data['chengguo'].find(v => v.key === '中期阶段') || {},
            '初期阶段': data['chengguo'].find(v => v.key === '初期阶段') || {},
          }
        }
        this.patentCount2 = newData
      }).catch(err => {})
    },
    renderEnterprisePatentOverview(patCountData) {
      this.$post(this.$Url.patent.patentType, {
        companyName: this.companyName
      })
        .then(data => {
          if (data) {
            let datas = data.data;
            var b = [];
            if (datas.length > 0) {
              for (var i = 0; i < datas.length; i++) {
                for (let j = 0; j < datas[i].na.length; j++) {
                  let name = datas[i].cn_name;
                  b.push({
                    national: name, // 专利国家
                    type: datas[i].na[j].name, // 专利类型
                    value1: datas[i].value,
                    apply: datas[i].na[j].value, // 申请
                    valid: datas[i].na[j].valid, // 有效
                    validArr: datas[i].na[j].validArr,
                    valueArr: datas[i].na[j].valueArr
                  });
                }
              }
            }
            let c = JSON.parse(JSON.stringify(patCountData));
            let d = JSON.parse(JSON.stringify(b));
            let v1 = 0,
              v2 = 0,
              v3 = 0,
              v4 = 0;
            for (let i = 0; i < d.length; i++) {
              if (d[i].type === "发明申请") {
                v1 = d[i].apply; // 申请
                v2 = d[i].valid; // 授权
              } else if (d[i].type === "实用新型") {
                v3 = d[i].valid; // 授权
              } else if (d[i].type === "外观设计") {
                v4 = d[i].apply;
              }
            }
            this.patentListItems = b;
            this.rowspan(b);
          }
        })
        .catch(error => {});
    },
    cellStyle({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        return "borderRight";
      }
    },
    rowspan(data) {
      this.spanArr = [];
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          this.spanArr.push(1);
          this.pos = 0;
        } else {
          // 判断当前元素与上一个元素是否相同
          if (data[i].national === data[i - 1].national) {
            this.spanArr[this.pos] += 1;
            this.spanArr.push(0);
          } else {
            this.spanArr.push(1);
            this.pos = i;
          }
        }
      }
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        };
      }
    }
  },
  mounted() {
    this.getCompanyPatentInfo();
    // 科技成果概况
    this.getDocument()
    axios.all([this.getCompanyPatentInfo(), this.getSell()])
      .then(axios.spread((res1, res2) => {
        let data1 = res1.data
        if (data1) {
          let patCountData = data1
          this.$set(this.patentCount, 'patentNum', patCountData.patentCount.patentNum) // 专利拥有量
          this.$set(this.patentCount, 'applyNum', patCountData.patentCount.applyNum) // 自主专利
          this.$set(this.patentCount, 'invalidNum', patCountData.patentCount.invalidNum) // 失效专利
          this.$set(this.patentCount, 'countryNum', patCountData.patentCount.countryNum) // 布局区域

          // let datas = patCountData.patentCount && patCountData.patentCount.type
          // var b = [];
          // if (datas.length>0) {
          //   for (var i=0;i<datas.length;i++) {
          //     for (let j=0;j<datas[i].na.length;j++) {
          //       let name = datas[i].cn_name
          //       b.push({
          //         national: name, // 专利国家
          //         type: datas[i].na[j].name, // 专利类型
          //         value1: datas[i].value,
          //         apply: datas[i].na[j].value, // 申请
          //         valid: datas[i].na[j].valid, // 有效
          //         validArr: datas[i].na[j].validArr,
          //         valueArr: datas[i].na[j].valueArr
          //       })
          //     }
          //   }
          // }

          // this.patentListItems = b
          // this.rowspan(b)
        }

        let data2 = res2.data
        if (data2) {
          this.$set(this.patentCount, 'buyNum', data2.buyNum) // 购买专利
          this.$set(this.patentCount, 'licenseNum', data2.transferNum) // 被许可专利
          this.$set(this.patentCount, 'sellNum', data2.divertNum) // 转出
        }
        
        // this.renderEnterprisePatentOverview(this.patentCount)
      }))
  },
};
</script>
<style lang="scss" scoped>
.card-box {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.elcard {
  position: relative;
  flex: .5;
  padding: 0 !important;
  text-align: left !important;
  ::v-deep {
    .el-card__header {
      position: relative;
      &:before {
        position: absolute;
        top: 50%;
        left: 0;
        width: 5px;
        height: 30px;
        margin-top: -15px;
        content: '';
        background-color: $color101;
      }
    }
  }
  .tit {
    font-size: 14px;
    font-weight: bold;
    i {
      color: #504da6;
    }
  }
  .achievements {
    position: relative;
    li {
      display: block;
      border-bottom: 1px solid #EBEEF5;
      margin-bottom: 10px;
    }
  }
}
.box {
  width: 100%;
  background: #fff;
  border-radius: 2px;
  overflow: hidden;
  h3 {
    text-align: left;
    line-height: 50px;
    border-bottom: 1px solid #ddd;
    padding-left: 20px;
  }
}
.el-row {
  margin-bottom: 20px;
}
.elcard {
  position: relative;
  padding: 20px 10px;
  .achievements {
    position: relative;
    li {
      display: block;
      border-bottom: 1px solid #EBEEF5;
      margin-bottom: 10px;
    }
  }
}
/* 科技成果概况 */
.info1, .info2, .info3 {
  position: relative;
  margin-left: 20px;
  margin-right: 10px;
  margin-bottom: 10px;
}
.info1 span, .info1 span, .info3 span {
  float: left;
  display: block;
  line-height: 24px;
  margin-right: 20px;
  font-size: 14px;
  color: #4f515b;
}
.info2 {
  font-weight: bold;
  font-size: 14px;
  color: #504da6;
}
.info1 span i, .info2 span i, .info3 span i {
  font-style: normal;
  font-weight: bold;
  font-size: 14px;
  color: #4f515b;
}
.info3 span i {
  font-weight: normal;
  color: #504da6;
}
.patent-column {
  text-align: center;
  font-size: 12px;
  color: #241c75;
}
</style>